<template>
  <a-row :gutter="[16, 16]" type="flex" class="dataComparison-single">
    <a-col :span="8">
      <a-card :bordered="false">
        <a-form :form="form">
          <a-form-item label="比对类别">
            <a-select
              v-decorator="['type', { rules: [{ required: true, message: '请选择比对类别' }] }]"
              placeholder="请选择比对类别"
              :options="options"
              @change="handleTypeChange"
            >
            </a-select>
          </a-form-item>
          <a-form-item label="比对人姓名">
            <a-input
              v-decorator="['name', { rules: [{ required: true, message: '请输入比对人姓名' }] }]"
              placeholder="请输入比对人姓名"
            ></a-input>
          </a-form-item>
          <a-form-item label="比对人身份证" v-show="requiredIDCard">
            <a-input
              v-decorator="[
                'idcard',
                {
                  initialValue: '',
                  rules: [{ required: requiredIDCard, message: '' }, { validator: validateIDCard }],
                },
              ]"
              placeholder="请输入比对人身份证"
            ></a-input>
          </a-form-item>
        </a-form>
        <div class="text-right">
          <y-button :loading="isSubmiting" type="primary" @click="handleSubmit">{{
            isSubmiting ? '比对中，请稍后...' : '开始比对'
          }}</y-button>
        </div>
      </a-card>
    </a-col>
    <a-col :span="16">
      <a-card :bordered="false">
        <div class="card-wrapper">
          <a-spin :spinning="isSubmiting" tip="比对中，请稍后...">
            <transition enter-active-class="zoom_in" leave-active-class="zoom_out" mode="out-in">
              <a-empty v-if="$isEmpty(response)" description="暂无比对结果"></a-empty>
              <a-result
                v-else
                :status="[200, 201].includes(response.code) ? 'success' : 'error'"
                title="比对结果"
                :sub-title="response.msg"
              >
                <template #extra> </template>
              </a-result>
            </transition>
          </a-spin>
        </div>
      </a-card>
    </a-col>
    <div v-if="form.getFieldValue('type') === '不动产交易数据比对' && response.data">
      <div
        v-for="(item, index) in response.data"
        :key="item.CertificateNo"
        style="background-color: #fff; margin: 0 8px; margin-top: 8px"
      >
        <div style="padding: 30px; padding-bottom: 0; font-size: 18px; font-weight: 1000">房屋{{ index + 1 }}</div>
        <!-- <a-col :span="24"> -->
        <a-descriptions
          style="background-color: #fff; padding: 35px; padding-bottom: 0"
          v-if="form.getFieldValue('type') === '不动产交易数据比对' && response.data"
        >
          <a-descriptions-item label="登记类型">{{ item.DJLX }}</a-descriptions-item>
          <a-descriptions-item label="产权证号">{{ item.CertificateNo }}</a-descriptions-item>
          <a-descriptions-item label="房屋编号">{{ item.HouseId }}</a-descriptions-item>
          <a-descriptions-item label="不动产单元号">{{ item.bdcdyh }}</a-descriptions-item>
          <a-descriptions-item label="用途">{{ item.UseRange }}㎡</a-descriptions-item>
          <a-descriptions-item label="坐落">{{ item.Address }}</a-descriptions-item>
          <a-descriptions-item label="建筑结构">{{ item.Structure }}㎡</a-descriptions-item>
          <a-descriptions-item label="建筑面积">{{ item.ConstructionArea }}㎡</a-descriptions-item>
          <a-descriptions-item label="套内面积">{{ item.ComprisingArea }}</a-descriptions-item>
          <a-descriptions-item label="交易价格">{{ item.HouseWorth }}</a-descriptions-item>
          <a-descriptions-item label="所在区域">{{ item.Region }}</a-descriptions-item>
          <a-descriptions-item label="所在区域编码">{{ item.RegionCode }}</a-descriptions-item>
          <a-descriptions-item label="所在区域编码">{{ item.EnterpriseCode }}</a-descriptions-item>
          <a-descriptions-item label="房屋户型">{{ item.RoomType }}</a-descriptions-item>
          <a-descriptions-item label="建筑类型">{{ item.ConstructionType }}</a-descriptions-item>
          <a-descriptions-item label="登记时间">{{ item.PropertyDate }}</a-descriptions-item>
          <a-descriptions-item label="备注">{{ item.Remarks }}</a-descriptions-item>
          <a-descriptions-item label="是否抵押">{{ item.is_mortgage ? '是' : '否' }}</a-descriptions-item>
          <a-descriptions-item label="是否查封">{{ item.is_limit ? '是' : '否' }}</a-descriptions-item>
        </a-descriptions>
        <!-- </a-col> -->
        <!-- <a-col :span="24"> -->
        <transition enter-active-class="page-fade-in" leave-active-class="page-fade-out" mode="out-in">
          <a-card :bordered="false" v-if="!$isEmpty(response.data)">
            <a-table
              rowKey="AcceptanceId"
              :scroll="{ x: true }"
              :columns="form.getFieldValue('type') === '不动产交易数据比对' ? columnsBDC : columnsBA"
              :data-source="form.getFieldValue('type') === '不动产交易数据比对' ? item.QLRLIST : dataSource"
              :pagination="false"
              size="middle"
            >
              <span slot="area" slot-scope="text">{{ text }}㎡</span>
              <ellipsis slot="address" slot-scope="text" :length="38">{{ text }}</ellipsis>
            </a-table>
          </a-card>
        </transition>
        <!-- </a-col> -->
      </div>
    </div>
    <div v-if="form.getFieldValue('type') !== '不动产交易数据比对' && dataSource" style="width: 100%">
      <!-- <div v-for="(item, index) in response.data" :key="item.CertificateNo"> -->
      <!-- <div style="padding: 30px; padding-bottom: 0; font-size: 18px; font-weight: 1000">房屋{{ index + 1 }}</div> -->
      <!-- <a-descriptions style="background-color: #fff; padding: 35px; padding-bottom: 0">
          <a-descriptions-item label="登记类型">{{ item.DJLX }}</a-descriptions-item>
          <a-descriptions-item label="产权证号">{{ item.CertificateNo }}</a-descriptions-item>
          <a-descriptions-item label="房屋编号">{{ item.HouseId }}</a-descriptions-item>
          <a-descriptions-item label="不动产单元号">{{ item.bdcdyh }}</a-descriptions-item>
          <a-descriptions-item label="用途">{{ item.UseRange }}㎡</a-descriptions-item>
          <a-descriptions-item label="坐落">{{ item.Address }}</a-descriptions-item>
          <a-descriptions-item label="建筑结构">{{ item.Structure }}㎡</a-descriptions-item>
          <a-descriptions-item label="建筑面积">{{ item.ConstructionArea }}㎡</a-descriptions-item>
          <a-descriptions-item label="套内面积">{{ item.ComprisingArea }}</a-descriptions-item>
          <a-descriptions-item label="交易价格">{{ item.HouseWorth }}</a-descriptions-item>
          <a-descriptions-item label="所在区域">{{ item.Region }}</a-descriptions-item>
          <a-descriptions-item label="所在区域编码">{{ item.RegionCode }}</a-descriptions-item>
          <a-descriptions-item label="所在区域编码">{{ item.EnterpriseCode }}</a-descriptions-item>
          <a-descriptions-item label="房屋户型">{{ item.RoomType }}</a-descriptions-item>
          <a-descriptions-item label="建筑类型">{{ item.ConstructionType }}</a-descriptions-item>
          <a-descriptions-item label="登记时间">{{ item.PropertyDate }}</a-descriptions-item>
          <a-descriptions-item label="备注">{{ item.Remarks }}</a-descriptions-item>
          <a-descriptions-item label="是否抵押">{{ item.is_mortgage ? '是' : '否' }}</a-descriptions-item>
          <a-descriptions-item label="是否查封">{{ item.is_limit ? '是' : '否' }}</a-descriptions-item>
        </a-descriptions> -->
      <a-col :span="24">
        <transition enter-active-class="page-fade-in" leave-active-class="page-fade-out" mode="out-in">
          <a-card :bordered="false" v-if="!$isEmpty(response.data)">
            <a-table
              rowKey="AcceptanceId"
              :scroll="{ x: true }"
              :columns="form.getFieldValue('type') === '不动产交易数据比对' ? columnsBDC : columnsBA"
              :data-source="form.getFieldValue('type') === '不动产交易数据比对' ? item.QLRLIST : dataSource"
              :pagination="false"
              size="middle"
            >
              <span slot="area" slot-scope="text">{{ text }}㎡</span>
              <ellipsis slot="address" slot-scope="text" :length="38">{{ text }}</ellipsis>
            </a-table>
          </a-card>
        </transition>
      </a-col>
    </div>
    <!-- </div> -->
  </a-row>
</template>

<script>
import { validIDCard } from '@/utils/validate'
import { getHousesNew, getMZHHSJnew, getMarriagenew, getHousesBA, getHousesXSBA } from '@/api/dataComparison'
import { Ellipsis } from '@/components'

export default {
  props: {},
  components: {
    Ellipsis,
  },
  data() {
    return {
      isSubmiting: false,
      response: {},
      options: [
        { label: '不动产交易数据比对', value: '不动产交易数据比对' },
        { label: '现售备案房产信息比对', value: '现售备案房产信息比对' },
        { label: '预售备案房产信息比对', value: '预售备案房产信息比对' },
        { label: '婚姻比对', value: '婚姻比对' },
        { label: '殡葬比对', value: '殡葬比对' },
      ],
      form: this.$form.createForm(this, { name: 'singleDataComparison', onValuesChange: this.onValuesChange }),
      requiredIDCard: true,
      validateIDCard: (rule, value, callback) => {
        if (this.requiredIDCard) {
          if (!value) {
            callback(new Error('请输入比对人身份证!'))
          }
          if (!validIDCard(value)) {
            callback(new Error('身份证号输入有误，请重新输入!'))
          }
          callback()
        } else {
          callback()
        }
      },
      // columnsBDC: [
      //   {
      //     title: '序号',
      //     align: 'center',
      //     customRender: (text, record, index) => index + 1,
      //   },
      //   {
      //     title: '建筑面积',
      //     align: 'center',
      //     dataIndex: 'ConstructionArea',
      //     scopedSlots: { customRender: 'area' },
      //   },
      //   {
      //     title: '套内面积',
      //     align: 'center',
      //     dataIndex: 'ComprisingArea',
      //     scopedSlots: { customRender: 'area' },
      //   },
      //   {
      //     title: '房屋户型',
      //     align: 'center',
      //     dataIndex: 'RoomType',
      //   },
      //   {
      //     title: '所在区域',
      //     align: 'center',
      //     dataIndex: 'Region',
      //   },
      //   {
      //     title: '房屋地址',
      //     align: 'center',
      //     dataIndex: 'Address',
      //   },
      // ],
      columnsBDC: [
        {
          title: '产权人姓名',
          align: 'center',
          dataIndex: 'ApplicantName',
        },
        {
          title: '证件号码',
          align: 'center',
          dataIndex: 'CertificateNumber',
        },
        {
          title: '权利人类型',
          align: 'center',
          dataIndex: 'QLRLX',
        },
      ],
      columnsBA: [
        {
          title: '序号',
          align: 'center',
          width: 80,
          customRender: (text, record, index) => index + 1,
        },
        {
          title: '备案号',
          align: 'center',
          dataIndex: 'CertificateNo',
        },
        {
          title: '备案状态',
          align: 'center',
          dataIndex: 'CaseState',
          customRender: (text) => {
            const stateMap = new Map([
              ['0', '办理'],
              ['1', '登簿'],
              ['2', '办结（为归档）'],
              ['3', '已归档'],
              ['4', '退件'],
            ])
            return stateMap.get(text)
          },
        },
        {
          title: '备案详细',
          align: 'center',
          dataIndex: 'CaseState2',
          customRender: (text) => {
            const stateMap = new Map([
              ['110', '网上新登记'],
              ['113', '备案中'],
              ['120', '网上预告已打印申请表'],
              ['130', '已网上提交'],
              ['140', '已打移交清单'],
              ['150', '内网已接件'],
              ['160', '内网办理'],
              ['170', '暂停办理'],
              ['310', '办结'],
              ['410', '变更或转移注销'],
              ['420', '注销'],
              ['430', '退件注销'],
              ['440', '办证注销'],
              ['450', '系统自动撤销'],
              ['460', '无对应注销案的注销'],
            ])
            return stateMap.get(text)
          },
        },
        {
          title: '项目名称',
          align: 'center',
          dataIndex: 'ProjectTitle',
        },

        {
          title: '建筑面积',
          align: 'center',
          dataIndex: 'ConstructionArea',
          scopedSlots: { customRender: 'area' },
        },
        {
          title: '套内面积',
          align: 'center',
          dataIndex: 'ComprisingArea',
          scopedSlots: { customRender: 'area' },
        },
        {
          title: '房屋结构',
          align: 'center',
          dataIndex: 'Structure',
        },
        {
          title: '房屋性质',
          align: 'center',
          dataIndex: 'HouseNature',
        },
        {
          title: '共有情况',
          align: 'center',
          dataIndex: 'CommonCondition',
        },
        {
          title: '房屋地址',
          align: 'center',
          dataIndex: 'Address',
          scopedSlots: { customRender: 'address' },
        },
      ],
      dataSource: [],
      QLRColumnsBDC: [
        {
          title: '产权人姓名',
          align: 'center',
          dataIndex: 'ApplicantName',
        },
        {
          title: '产权人证件号码',
          align: 'center',
          dataIndex: 'CertificateNumber',
        },
        {
          title: '产权人类型',
          align: 'center',
          dataIndex: 'QLRLX',
        },
      ],
      QLRColumnsBA: [
        {
          title: '名称',
          align: 'center',
          dataIndex: 'Name',
        },
        {
          title: '证件类型',
          align: 'center',
          dataIndex: 'NoType',
        },
        {
          title: '证件号码',
          align: 'center',
          dataIndex: 'IdentityNo',
        },
        {
          title: '人员性质',
          align: 'center',
          dataIndex: 'ApplicantNatrue',
        },
        {
          title: '申请方',
          align: 'center',
          dataIndex: 'ApplicantAttribute',
        },
      ],
    }
  },
  watch: {
    response: {
      deep: true,
      handler(n) {
        if (this.$isEmpty(n.data)) {
          this.dataSource = []
        } else {
          let arr = []
          n.data.forEach((e) => {
            const { CertificateNo, ProjectTitle, CaseState, CaseState2 } = e
            e.HouseList.forEach((e) => {
              Object.assign(e, {
                CertificateNo,
                ProjectTitle,
                CaseState,
                CaseState2,
              })
            })
            arr = arr.concat(e.HouseList)
          })
          this.dataSource = arr
        }
      },
    },
  },
  methods: {
    onValuesChange(values) {
      this.response = {}
    },
    handleSubmit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.isSubmiting = true
          this.response = {}
          const type = values.type
          delete values.type
          const requestMap = new Map([
            ['不动产交易数据比对', getHousesNew],
            ['现售备案房产信息比对', getHousesXSBA],
            ['预售备案房产信息比对', getHousesBA],
            ['婚姻比对', getMarriagenew],
            ['殡葬比对', getMZHHSJnew],
          ])
          requestMap
            .get(type)
            .apply(this, [values])
            .then((res) => {
              res.type = type
              this.response = res
            })
            .finally(() => {
              this.isSubmiting = false
            })
        }
      })
    },
    handleTypeChange(val) {
      // if (val === '不动产交易数据比对') {
      //   this.requiredIDCard = false
      //   this.$nextTick(() => {
      //     this.form.setFieldsValue({
      //       idcard: ''
      //     })
      //   })
      // } else {
      //   this.requiredIDCard = true
      // }
    },
  },
}
</script>
<style lang="less">
.dataComparison-single {
  .ant-result-subtitle {
    font-size: 18px !important;
  }
}
</style>
<style lang="less" scoped>
/deep/ .ant-table td {
  white-space: nowrap;
}
/deep/ .ant-card {
  height: 100%;
  .ant-card-body {
    height: 100%;
    overflow-x: hidden;
    .card-wrapper {
      width: 100%;
      height: 100%;
      display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
